<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- 
        拖拽事件 需要先给标签设置为可拖拽
        draggable="true"
        img标签默认可拖拽
     -->
    <img id="a1" draggable="false" src="https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/33428/39/16450/106681/6311cad7Ef9b3d856/f10720b7f8f38937.jpg!cr_1053x420_4_0!q70.jpg" alt="">
    <img id="a2" src="https://m15.360buyimg.com/mobilecms/jfs/t1/3230/40/20384/44107/62daf2d9E5c5e0e55/03ab360c40ddc266.jpg!cr_1125x449_0_166!q70.jpg" alt="">
    <img id="a3" src="https://m15.360buyimg.com/mobilecms/jfs/t1/110775/22/28940/94917/62e5bc6dE569b2244/5d14fc9f06d87341.jpg!cr_1125x449_0_166!q70.jpg" alt="">
    <script>
        var imgs = document.images;
        for(let i = 0;i < imgs.length;i++){
            // 阻止默认事件 可以阻止浏览器在新的窗口打开图片
            // 先个标签添加可拖拽属性, 才可以触发拖拽事件
            imgs[i].draggable = true;
            imgs[i].ondragstart = function(e){
                e.preventDefault()
                // console.log("开始拖拽了");
                // console.log("开始拖拽了",e.target);
                // console.log("开始拖拽了",e.target.id);
                e.dataTransfer.setData("URL",e.target.id);
                var u = e.dataTransfer.getData("URL");
                console.log(u);
            }
            imgs[i].ondragenter = function(e){
                // console.log("拖拽到其他元素上了");
                // console.log("拖拽到其他元素上了",e.target);
                
            }
            imgs[i].ondragover = function(e){
                // console.log("在其他元素上进行移动了");
                // console.log("在其他元素上进行移动了",e.target);
            }
            imgs[i].ondragleave = function(e){
                // console.log("移除其他元素");
                // console.log("移出其他元素",e.target);
            }
            imgs[i].ondragend = function(e){
                // console.log("结束拖拽了");
                //
                console.log("结束拖拽了",e.target); //被拖拽的标签
                // var u = e.dataTransfer.getData("URL");
                // console.log(u);
            }
            imgs[i].ondrop = function(e){
                // 
                console.log("拖拽松开了",e.target); //在那个标签上松开的
            }
        }
    </script>
</body>
</html>